<template>
    <Col :sm="24" :md="24" :lg="12">
         <div id="myCharts" :style="{width: '600px', height: '200px'}"></div>
    </Col>
</template>
<script>  
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default { 
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myCharts'))
        // 绘制图表
        myChart.setOption({
            title : {
                text: '黑烟车饼图', 
                x:'center',
                textStyle:{color:'#FFF'} 
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: { 
                top:'15%',
                data: ['海八路隧道','广佛新干线','大沥中队','樵丹路','樵高路'], 
                textStyle:{color:'#FFF'} 
            },
            series : [
                {
                    name: '数据来源：',
                    type: 'pie',
                    radius : '60%',
                    center: ['50%', '65%'],
                    data:[
                        {value:335, name:'海八路隧道'},
                        {value:310, name:'广佛新干线'},
                        {value:234, name:'大沥中队'},
                        {value:135, name:'樵丹路'},
                        {value:1548, name:'樵高路'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ],
        color:['#c23531','#80FFFF', '#61a0a8', '#d48265', '#91c7ae','#749f83']
        });
    }
  }
}
 
</script>